<template>

    <div class="m_right">
        <p></p>
        <div class="mem_tit">用户列表</div>

        <form class="horizontal-form">
            <div class="form-item">
                <label>用户名：</label>
                <input name="loginName" v-model="loginName">
            </div>
            <div class="form-item">
                <label>创建时间：</label>
                <input name="createTime" v-model="createTime" @blur="checkTime">
                <span style="color: red;">{{ timeCheckInfo }}</span>&nbsp;&nbsp;
            </div>
            <div class="form-item">
                <button @click.prevent="getUserPageInfo(1, 5)">提交</button>
            </div>
        </form>

        <table v-if="pageInfo != null">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>用户名</th>
                    <th>用户姓名</th>
                    <th>邮箱</th>
                    <th>手机</th>
                    <th>性别</th>
                    <th>身份</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(user, index) in pageInfo.list" :key="user.id">
                    <td style="color:#ff4e00;">{{ (pageInfo.pageNum - 1) * pageInfo.pageSize + index + 1 }}</td>
                    <td>{{ user.loginName }}</td>
                    <td>{{ user.userName }}</td>
                    <td>{{ user.email }}</td>
                    <td>{{ user.mobile }}</td>
                    <td>{{ user.sex == 1 ? "男" : "女" }}</td>
                    <td>{{ user.type == 1 ? "管理员" : "普通用户" }}</td>
                    <td>{{ user.createTime }}</td>
                    <td>
                        <a href="#" @click.prevent="updateUser(user.id, user.type)">修改</a>&nbsp;
                        <a href="#" @click.prevent="deleteUser(user.id, user.type)">删除</a>
                    </td>
                </tr>
            </tbody>
        </table>

        <p class="pagination" v-if="pageInfo != null">
            <span>
                <span>共{{ pageInfo.total }}条数据</span>&nbsp;&nbsp;
                <span>第{{ pageInfo.pageNum }}/{{ pageInfo.pages }}页</span>&nbsp;&nbsp;
            </span>
            <span>
                <a href="#" @click.prevent="getPage('home')">首页</a>&nbsp;&nbsp;
                <a href="#" @click.prevent="getPage('last')">上一页</a>&nbsp;&nbsp;
                <a href="#" @click.prevent="getPage('next')">下一页</a>&nbsp;&nbsp;
                <a href="#" @click.prevent="getPage('end')">末页</a>
            </span>
        </p>
        <div v-if="pageInfo == null">
            <p class="pagination">暂无数据！</p>
        </div>


        <!-- 修改 -->
        <div v-show="updateShow">
            <p></p>
            <div class="mem_tit">用户修改</div>
            <form>
                <table>
                    <tr>
                        <td style="width: 40%;">用户名称：</td>
                        <td>
                            <input v-model="userinfo.userName" @blur="checkUserName()">
                            <span style="color: red;">{{ userifoError.userNameError }}</span>
                        </td>

                    </tr>
                    <tr>
                        <td style="width: 40%;">用户手机：</td>
                        <td>
                            <input v-model="userinfo.mobile" @blur="checkMobile()" readonly>
                            <span style="color: red;">{{ userifoError.mobileError }}</span>
                        </td>

                    </tr>
                    <tr>
                        <td style="width: 40%;">用户邮箱：</td>
                        <td>
                            <input v-model="userinfo.email" @click="checkEmail()" readonly>
                            <span style="color: red;">{{ userifoError.emailError }}</span>
                        </td>

                    </tr>
                                    <tr>
                        <td style="width: 40%;">身份证：</td>
                        <td>
                            <input v-model="userinfo.identityCode" @click="checkEmail()" readonly>
        
                        </td>

                    </tr>
                    <tr>
                        <td style="width: 40%;">性别：</td>
                        <td>
                            <select v-model="userinfo.sex" @change="checkSex()">
                                <option value="">--请选择--</option>
                                <option value="1">男</option>
                                <option value="0">女</option>
                            </select>
                            <span style="color: red;">{{ userifoError.sexError }}</span>
                        </td>

                    </tr>
                    <tr>
                        <td style="width: 40%;">用户身份：</td>
                        <td>
                            <select v-model="userinfo.type" @change="checkType()">
                                <option value="">--请选择--</option>
                                <option value="1">管理员</option>
                                <option value="0">普通用户</option>
                            </select>
                            <span style="color: red;">{{ userifoError.typeError }}</span>
                        </td>

                    </tr>
                    <td colspan="2">
                        <button @click.prevent="toUpdateUser">提交</button>&nbsp;&nbsp;
                        <button @click.prevent="updateShow = false">取消</button>
                    </td>

                </table>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    name: "MemberUserListRight",
    data() {
        return {
            pageInfo: null,
            adminUser: null,
            userinfo: {
                id: 0,
                userName: '',
                email: '',
                mobile: '',
                identityCode:'',
                sex: '',
                type: '',
            },
            
            userifoError: {
                userNameError: '',
                emailError: '',
                mobileError: '',
                sexError: '',
                typeError: '',
            },
            loginName: "",
            createTime: "",
            updateShow: false,
            timeCheckInfo: '',
            identityCode:'',
            mobile:'',
            email:''
        };
    },
    methods: {
        //获取分页数据
        getUserPageInfo(pageNum, pageSize) {
            if (!this.checkTime()) {
                return
            }
            this.$axios({
                url: "/selectUserByPage",
                method: "post",
                data: {
                    pageNum: pageNum,
                    pageSize: pageSize,
                    loginName: this.loginName,
                    createTime: this.createTime,
                },
                headers: {
                    "content-type": "application/json;charset=utf-8",
                },
            }).then((rs) => {
                if (rs.data.code == 5200 || rs.data.code == "5200") {
                    this.pageInfo = rs.data.pageInfo;
                }else{
                    this.pageInfo = null
                }
            });
        },
        //分页
        getPage(opr) {
            let pageNum = 1
            switch (opr) {
                case 'last':
                    pageNum = this.pageInfo.prePage === 0 ? 1 : this.pageInfo.prePage
                    break
                case 'next':
                    pageNum = this.pageInfo.nextPage === 0 ? this.pageInfo.pages : this.pageInfo.nextPage
                    break
                case 'end':
                    pageNum = this.pageInfo.pages
                    break
            }
            this.getUserPageInfo(pageNum, 5)
        },
        showUser(id) {
            this.userShow = true
            this.$axios({
                url: "/selectUserById",
                method: 'get',
                params: { id: id }
            }).then(rs => {
                if (rs.data.code == 5200 || rs.data.code == '5200') {
                    this.userinfo = rs.data.user
                    this.identityCode = this.userinfo.identityCode
                    this.mobile = this.userinfo.mobile
                    this.email = this.userinfo.email
                }
            })
        },
        updateUser(id, type) {
            if (type == 1) {
                alert('不能修改管理员用户！')
                return
            }
            this.updateShow = true
            this.showUser(id)
        },
        toUpdateUser() {
            if (this.checkUserName()==true && this.checkSex()==true && this.checkType()==true) {
                console.log(1)
                this.$axios({
                    url: 'updateUser',
                    method: 'post',
                    data: {
                        id:this.userinfo.id,
                        userName:this.userinfo.userName,
                        mobile:this.userinfo.mobile,
                        email:this.userinfo.email,
                        identityCode:this.userinfo.identityCode,
                        sex:this.userinfo.sex,
                        type:this.userinfo.type
                     },
                    headers: {
                        'contentType': 'application/json'
                    }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == '5200') {
                        alert('修改成功！')
                        this.updateShow = false
                        this.getUserPageInfo(1, 5);
                    } else {
                        alert('修改失败！')
                    }
                })
            }
        },
        deleteUser(id, type) {
            if (confirm('是否删除！')) {
                if (type == 1) {
                    alert('不能删除管理员用户！')
                    return
                }
                this.$axios({
                    url: '/delUser',
                    method: 'get',
                    params: { id: id }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == '5200') {
                        alert('删除成功！')
                        this.getUserPageInfo(1, 5)
                    } else {
                        alert('删除失败！')
                    }
                })
            }
        },
        checkMobile() {
            const pattern = /^1[357]\d{9}$/
            if (!pattern.test(this.userinfo.mobile)) {
                this.userifoError.mobileError = '手机号格式不正确！'
                return false
            }
            if (this.userinfo.mobile == '') {
                this.userifoError.mobileError = '手机号不能为空！'
                return false
            } else if(this.userinfo.mobile != this.mobile) {
                this.$axios({
                    url: '/checkMobile',
                    method: 'get',
                    params: { mobile: this.userinfo.mobile }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == "5200") {
                        this.userifoError.mobileError = ''
                        return true
                    } else {
                        this.userifoError.mobileError = '手机号重复！'
                        return false
                    }
                })
            }
        },
        checkEmail() {
            if (this.userinfo.email == '') {
                this.userifoError.emailError = '邮箱不能为空！'
                return false
            }
            let partten = /^[^\s@]+@[^\s@]+.[^\s@]+$/
            if (!partten.test(this.email)) {
                this.userifoError.emailError = '邮箱格式不正确！'
                return false
            } else if(this.userinfo.email != this.email) {
                this.$axios({
                    url: '/checkEmail',
                    method: 'get',
                    params: { email: this.email }
                }).then(rs => {
                    if (rs.data.code == 5200 || rs.data.code == "5200") {
                        this.userifoError.emailError = ''
                        this.check = true
                    } else {
                        this.userifoError.emailError = '邮箱重复！'
                        this.check = false
                    }
                })
            }
        },
        checkUserName() {
            if (this.userinfo.userName == '') {
                this.userifoError.userNameError = '用户姓名不能为空！'
                return false
            }
            this.userifoError.userNameError = ''
            return true
        },
        checkSex() {
            if (this.userinfo.sex == '' && this.userinfo.sex != 0) {
                this.userifoError.sexError = '用户性别不能为空！'
                return false
            }
            this.userifoError.sexError = ''
            return true
        },
        checkType() {
            console.log(this.userinfo.type)
            if (this.userinfo.type == '' && this.userinfo.type != 0 ) {
                console.log(1)
                this.userifoError.typeError = '用户身份不能为空！'
                return false
            }
            this.userifoError.typeError = ''
            return true
        },

        back(pre) {
            if (pre == 'userShow') {
                this.userShow == false
            } else {
                this.updateShow == false
            }
        },
        checkTime() {
            let patten = /^\d{4}$/
            if (this.createTime == '') {
                return true
            }
            if (!patten.test(this.createTime)) {
                this.timeCheckInfo = '请输入正确的年份（例如2025）'
                return false
            }
            this.timeCheckInfo = ''
            return true
        }
    },
    mounted() {
        this.getUserPageInfo(1, 5);
        let usrStr = localStorage.getItem("user");
        this.adminUser = JSON.parse(usrStr);
        console.log(this.user);
    },
};
</script>
<style scoped>
/* 水平表单 */
.horizontal-form {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    gap: 12px;
    /* 列间距 */
    flex-wrap: wrap;
    /* 小屏自动换行 */
}

.form-item {
    display: flex;
    align-items: center;
    gap: 4px;
    /* label 与 input 间距 */
}

/* 按钮组靠右 */
.buttons {
    margin-left: auto;
}

table {
    width: 90%;
    border-collapse: collapse;
    margin-top: 20px;
    text-align: center;
    border: 1px solid #ddd;
}

th,
td {
    border: 1px solid #ddd;
    /* 内部细线 */
    padding: 6px 10px;
    /* 文字与线之间的空隙 */
}

th:nth-child(1),
td:nth-child(1) {
    width: 60px;
}

/* 序号 */
th:nth-child(2),
td:nth-child(2) {
    width: auto;
}

/* 资讯主题，自适应 */
th:nth-child(3),
td:nth-child(3) {
    width: 150px;
}

/* 发布时间 */
th:nth-child(4),
td:nth-child(4) {
    width: 120px;
}

/* 操作 */

tbody tr:hover {
    background: #f5f5f5;
}
thead th{
    background: #f5f5f5;
}
/* 分页居中 */
.pagination {
    text-align: center;
    margin-top: 20px;
}
</style>